<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <title>105#RESUME</title>
    </head>

    <body>
    <div class="container">
     <div class="row">

      <div class="col-sm-12">
        <div>
            <div>
                <img src="./IMG_0263.JPG" class="img-circle center-block" height="150" width="150">
            </div>
            <div>
                <h1 class="text-center">Hello,<br> my name is <font color="#999999">YANRANN</font> and this is my resume/cv</h1>
            </div>
      </div>

      <div class="row">
         <div class="col-xs-12 col-sm-8">
        <div class="row">
         
            
              
              
              <div class="col-xs-12">
                <h2><font color="purple">//ABOUT ME</font></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.</p>
              </div>


              <div class="col-xs-12">
                <h2><font color="purple">//EDUCATION</font></h2>
                <div class="table-responsive">
                    <table class="table table-hover" width="800">
                      <tr>
                        <td width="150">1990</td>
                        <td width="650"><h3>I was born in Katowice</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, exercitationem, totam, dolores iste dolore est aut modi.</p></td>
                      </tr>
                      <tr>
                          <td width="150">2005</td>
                          <td width="650"><h3>Secondary school specializing in artistic</h3>
                            <p>Eos, explicabo, nam, tenetur et ab eius deserunt aspernatur ipsum ducimus quibusdam quis voluptatibus.</p></td>
                      </tr>
                      <tr>
                          <td width="150">2009</td>
                          <td width="650"><h3>First level graduation in Graphic Design</h3>
                            <p>Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis? Iusto, quibusdam asperiores unde repellat.</p></td>
                      </tr>
                      <tr>
                          <td width="150">2012</td>
                          <td width="650"><h3>Second level graduation in Graphic Design</h3>
                            <p>Ducimus, aliquam tempore autem itaque et accusantium!</p></td>
                      </tr>
                    </table>
                </div>
              </div>
              
              
              <div class="col-xs-12">
                <h2><font color="purple">//EXPERIENCE</font></h2>
                <div class="table-responsive">
                  <table class="table table-hover" width="800">
                    <tr>
                      <td width="200"><h3>Google</h3>
                        <p>2013 - 2014</p></td>
                      <td width="600"><h4>Front-end developer / php programmer</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia.</p></td>
                    </tr>
                    <tr>
                       <td width="200"><h3>Twitter</h3>
                        <p>2012</p></td>
                      <td width="600"><h4>Web Developer</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo soluta.</p></td>
                    </tr>
                  </table>
                </div>
              </div>
       
            </div>
          </div>
  


          <div class="col-xs-12 col-sm-4">
            <div class="row">
             
             
              <div class="col-xs-12">
               <h2><font color="purple">//CONTACT</font></h2>
               <div class="table-responsive">
                  <table class="table table-hover" width="400">
                    <tr>
                      <td width="50"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></td>
                      <td width="350">500 345 242</td>
                    </tr>
                    <tr>
                        <td width="50"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></td>
                        <td width="350">office@kamsolutions.pl</td>
                    </tr>
                    <tr>
                        <td width="50"><span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></td>
                        <td width="350"><h5>Twitter</h5>
                          <p>https://twitter.com/WordPress</p></td>
                    </tr>
                    <tr>
                        <td width="50"><span class="glyphicon glyphicon-user" aria-hidden="true"></td>
                        <td width="350"><h5>Facebook</h5>
                          <p>https://www.facebook.com/facebook</p></td>
                    </tr>
                    <tr>
                        <td width="50"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></td>
                        <td width="350"><h5>Skype</h5>
                          <p>kamsolutions.pl</p></td>
                    </tr>
                  </table>
                </div>
              </div>


              <div class="col-xs-12">
              <h2><font color="purple">//SKILLS</font></h2>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;" width="400">
                    Html
                  </div>
                </div>
                 <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;" width="400">
                    Java
                  </div>
                 </div>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" width="400">
                    C++
                  </div>
                </div>
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;" width="400">
                    Python
                  </div>
                </div>
              </div>
        
              <div class="col-xs-12">
                <h2><font color="purple">//LANGUAGE</font></h2>
                 <table class="table" width="400">
                 <tr>
                   <td width="200">Chinese</td>
                   <td width="200">★★★★★</td>
                 </tr>
                 <tr>
                   <td width="200">English</td>
                   <td width="200">★★★☆☆</td>
                 </tr>
                 </table>
              </div>


              <div class="col-xs-12">
                <h2><font color="purple">//HOBBIES</font></h2>
                <span class="label label-primary"><span class="glyphicon glyphicon-heart" aria-hidden="true">Sleeping</span></span>
                <span class="label label-primary"><span class="glyphicon glyphicon-heart" aria-hidden="true">Eating</span></span>
                <span class="label label-primary"><span class="glyphicon glyphicon-heart" aria-hidden="true">Listen Music</span></span>
              </div>

             </div>
           </div>
        
          </div>
        </div>

      </div>
    </div>
           

    </body>
</html>